<style>
html,body{height: 100%;}
.f_left{float: left;}
.page{height:9.2rem;overflow: auto;}
.page>*{padding: 0 10px;}
	.page .banner{width: 100%;height: 65%;background: url("../../../images/img/yuncaigoudetail.png") no-repeat center;
		background-color: #fff;background-size: 100%;margin-bottom:.2rem;border-bottom: 1px solid #ccc;
	}
	.page .info{width: 100%;height: 20%;margin-bottom:.1rem;}
	.page .info .txt-right{text-align: right;}
	.page .info .part-mid .price,.page .info .part-mid .sales{color: #ff0000;}
	.page .info .part-mid .buyNum{float:left;display:none;}
	.page .info .part-mid .buyNum.active{display:block;}
	.page .info .part-mid .count{width:.3rem;height:.3rem;line-height:.3rem;background-color:#bfbfbf;color:#f0f0f0;text-align:center;display:inline-block;}
	.page .info .part-mid .nums{display:inline-block;text-align:center;width:.6rem;height:.3rem;line-height:.3rem;color:#333;}
	.page .info .part-mid .originalPrice{text-decoration: line-through;color: #ccc;}
	.page .info .part-top .title{color: #333;font-weight: 800;font-size:.24rem;}
	.page .info .part-top .icon{float: right;width: 24px;height: 24px;
	}
	.page .info .part-top .icon a{float: right;width: 24px;height: 24px;background: url("../../../../../images/img/aijia.png") no-repeat center;background-size: 70%;}
	.page .info .part-top .icon a.active{background: url("../../../../../images/img/ai.png") no-repeat center;background-size: 70%;}
	.page .info>*{width: 100%;height:33.33333%;}
	.page .info .part-bottom{border-bottom:1px solid #ccc;}
	.page .info .part-bottom .tips{display:none;}
	.page .info .part-bottom .tips.active{display:inline-block;}
	.page .info .part-top>*{float: left;width: 50%;height: 100%;}
	.page .info .part-mid>div:nth-of-type(1),.page .info .part-mid>div:nth-of-type(2){float: left;width: 25%;height: 100%;}
	.page .info .part-mid>div:nth-last-child{float: left;width: 50%;height: 100%;}
	.page .info .tag{width: 50px;background-color: #0068b7;color: #fff;padding: 5px;border-radius: 5px;text-align: center;margin:0 3px;
	}
	.page .descrip{width: 100%;height:150px;}
	.page .descrip .tab-content{width: 100%;height: calc(100% - 30px);color: #666;position: relative;}
	.page .descrip .tab-content>li{position: absolute;left: 0;top: o;width: 100%;height: 100%;z-index: 0;background-color: #fff;display:none;}
	.page .descrip .tab-content>li.active{z-index: 10;display:block;}
	.page .descrip .tab-list{width: 100%;height: 30px;border-bottom: 1px solid #eee;}
	.page .descrip .tab-list .tab-item{width: 50%;height: 100%;float: left;background-color: #eee;color: #333;line-height: 30px;text-align: center;}
	.page .descrip .tab-list .tab-item.active{background-color: #fff;color: #0068b7;z-index: 10;}
	 .operation{width: 100%;height:50px;position: fixed;bottom: 0;left: 0;right: 0;padding: 0;}
	 .operation>*{float: left;}
	 .operation>*:nth-child(1), .operation>*:nth-child(2){width: 25%;height: 100%;float: left;}
	 .operation .buy{height: 100%;width: 50%;float: left;/* background-color: #0068b7; */color: #fff;align-items:center; display: -webkit-flex;justify-content:center; background: -webkit-linear-gradient(left, #6dadde 0%, #0068b7 115%);background: linear-gradient(to right, #6dadde 0%, #0068b7 115%);}
	 .operation .contact div, .operation .shop div{width: 100%;height: 70%;background: url("../../../images/img/contact.png") no-repeat center;background-size: 35%;}
	 .operation .shop div{width: 100%;height: 70%;background: url("../../../images/img/shop.png") no-repeat center;background-size: 35%;}
	 .operation .contact em, .operation .shop em{width: 100%;height: 30%;text-align: center;color: #333;display: block;}
	/*commet:start*/
	.descrip .comment .comment-item{width: 100%;border-bottom: 1px solid #CCCCCC;margin-bottom:.2rem ;background-color:#fff;padding: 0 .2rem;}
	.descrip .comment .comment-item .comment-top{width: 100%;height: 1rem;}
	.descrip .comment .comment-item .comment-top>div{height: 100%;}
	.descrip .comment .comment-item .comment-top .avatar{width: 1rem;border-radius: 50%;background: url('../../../images/img/wangxi1_03.png') no-repeat center;background-size: 60%;}
	.descrip .comment .comment-item .comment-top .name{line-height: 1rem;}
	.descrip .comment .comment-item .comment-mid{width: 100%;height: .6rem;line-height: .6rem;}
	.descrip .comment .comment-item .commet-bottom{width: 100%;}
	.descrip .comment .comment-item .commet-bottom .content{color: #333333;height: .6rem;width: 100%;line-height:.6rem;}
	.descrip .comment .comment-item .commet-bottom .reply{width: 100%;}
	.descrip .comment .comment-item .commet-bottom .reply .item {height:.6rem;color: #666666;margin: .1rem 0;}
	.descrip .comment .comment-item .commet-bottom .reply .item a{line-height:.6rem;border-radius: .2rem;display: inline-block;height: 100%;background-color: #eee;padding:0 .2rem;}
	/*commet:end*/
</style>


<div class="page" class="iclod">

	<div class="banner"></div>
	<div class="info">
		<div class="part-top">
			<h3 class="title txt">MDM</h3>
			<span class="icon txt-right ">
				<a href="javascript:void (0)" class="collect"></a>
			</span>
		</div>
		<div class="part-mid">
			<div><span class="price">8.00</span><span class="unit">元</span></div>
			<div><span class="originalPrice">8.00元</span><span></span></div>
			<div class="buyNum" ><a  class="reduceNum count">-</a><a class="nums">1</a><a class=" addNum count">+</a></div>
			<div class="txt-right" style="color: #ccc;"><span>销量：</span><span class="sales">7</span></div>
		</div>
		<div class="part-bottom">
			<!-- <label class="tag">采云订购</label>
			<label class="tag">云采购</label>
			<label class="tag">互联网</label> -->
			<span class="tips"><em style="color:#0068b7;" >4</em>及以上次立减<em style="color:#0068b7;">50000</em></span>
		</div>
	</div>
	<div class="descrip">
		<ul class="tab-list">
			<li class="tab-item description active">介绍</li>
			<li class="tab-item comment">评论</li>
		</ul>
		<ul class="tab-content">
			<li class="description active">
				随着智能手机、Pad等轻薄便携的移动智能终端与企业应用结合得越来越紧密，随之而来的移动设备管理也不断挑战传统IT运维管理。为总
			</li>
			<li class="comment">
				<ul class="comment-list">
					<li class="comment-item">
						<div class="comment-top">
							<div class="avatar f_left"></div>
							<div class="name f_left">用户1</div>
						</div>
						<div class="comment-mid">
							2017-09-27
							<!--<div class="date"></div>-->
						</div>
						<div class="commet-bottom">
							<div class="content">
								我的评论
							</div>
							<ul class="reply">
								<li class="item"><a href=""  style="float: right;">你回复我的：文件覅我还佛网和</a></li>
								<li class="item"><a href="" >我回复你的：文件覅我还佛网和</a></li>
							</ul>
						</div>
					</li>
					<li class="comment-item">
						<div class="comment-top">
							<div class="avatar f_left"></div>
							<div class="name f_left">用户2</div>
						</div>
						<div class="comment-mid">
							2017-09-27
							<!--<div class="date"></div>-->
						</div>
						<div class="commet-bottom">
							<div class="content">
								我的评论
							</div>
							<ul class="reply">
								<li class="item"><a href=""  >你回复我的：文件覅我还佛网和</a></li>
								<li class="item" ><a href="" style="float: right;">我回复你的：文件覅我还佛网和</a></li>
								
							</ul>
						</div>
					</li>
				</ul>
			</li>
		</ul>
	</div>
	
</div>

<div class="operation">
		<div class="contact">
			<div></div>
			<em>立即咨询</em>
		</div>
		<div class="shop" >
			<div></div>
			<em>店铺</em>
		</div>
		<div class="buy">立即购买</div>
	</div>

